<!DOCTYPE html>
<html lang="ko-KR" class="react-fullpage__parents">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="assets/css/index.css" data-n-g="" />
  <script src="assets/js/jquery-3.3.1.min.js"></script>
</head>

<body>
  <div class="header">
    <div class="header_inner pc-show">
      <div class="header_left">
        <img class="header_logo pointer" src=".//assets/img/index/logo.webp" alt="">
      </div>
      <div class="header-right">
        <div class="header_search flex-a-center">
          <div class="header_search_inner flex-a-center">
            <div class="header_search_inner_input flex-a-center">
              <input class="search_input" type="text" placeholder="검색">
              <img class="close_icon pointer" src=".//assets/svg/index/close.svg" alt="">
            </div>
            <img class="search_icon pointer" src=".//assets/svg/index/search.svg" alt="">
          </div>
        </div>
        <div class="header_time pointer flex-a-center">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path id="Vector"
              d="M9.17664 1.83529V0H14.8237V1.83529C19.7649 3.10588 23.2943 7.48235 23.2943 12.7059C23.2943 18.9176 18.2119 24 12.0002 24C5.78841 24 0.706055 18.9176 0.706055 12.7059C0.706055 7.48235 4.23547 2.96471 9.17664 1.83529ZM12.0002 21.1765C16.659 21.1765 20.4708 17.3647 20.4708 12.7059C20.4708 8.04706 16.659 4.23529 12.0002 4.23529C7.34135 4.23529 3.52958 8.04706 3.52958 12.7059C3.52958 17.3647 7.34135 21.1765 12.0002 21.1765ZM15.6708 7.05882L17.6472 9.0353L12.5649 14.1176L10.5884 12.1412L15.6708 7.05882Z"
              fill="#B1B1B1" />
          </svg>
          <span>기록</span>
          <div class="header_time_drop all_drop ">
            <div class="flex flex-center" style="height: 100%;">
              <img src=".//assets/svg/index/noData.svg" alt="">
            </div>
          </div>
        </div>
        <div class="header_btn flex flex-center pointer" id="open_login">로그인</div>
        <div class="header_btn flex flex-center pointer" id="open_sign" style="margin-left: 16px;">회원가입</div>
        <div class="header_userlogo flex-a-center">
          <img class="header_userlogo_img" src=".//assets/img/index/user.png" alt="">
          <div class="header_userlogo_drop all_drop flex flex-clom">
            <div class="header_userlogo_drop_head">
              <img class="header_userlogo_img" src="../assets/img/index/user.png" alt="">
              <div class="username">sagfhkjas</div>
            </div>
            <div class="header_userlogo_drop_body">
              <div class="header_userlogo_drop_body_item">
                <img src=".//assets/svg/index/colloect-top.svg" alt="">
                <span> 즐겨찾기 </span>
              </div>
              <div class="header_userlogo_drop_body_item" id="loging-quite">
                <img src=".//assets/svg/index/quite.svg" alt="">
                <span>로그아웃 </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mobile-show">
      <div class="header-left">
        <div class="header_inner_right_m_top">
          <img class="header_inner_menu" src=".//assets/img/index/menu.svg" alt="">
          <img class="header_inner_logo" src=".//assets/img/index/logo.webp" alt="">
        </div>
        <div class="header_inner_right_m">
          <div class="login_btn button" id="openm_login">로그인</div>
          <div class="register_btn button" id="openm_sign">회원가입</div>
        </div>
        <div class="header_search flex-a-center">
          <div class="header_search_inner flex-a-center">
            <div class="header_search_inner_input flex-a-center">
              <input class="search_input" type="text" placeholder="검색">
              <img class="close_icon pointer" src=".//assets/svg/index/close.svg" alt="">
            </div>
            <img class="search_icon pointer" src=".//assets/svg/index/search.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="login_popup">
    <div class="login_popup_box">
      <div class="login_popup_tit">
        <div class="head-close">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <g clip-path="url(#clip0_8878_12)">
              <path
                d="M13.274 12L15.3946 9.87873C15.5634 9.70996 15.6583 9.48104 15.6584 9.24231C15.6584 9.00359 15.5637 8.77461 15.3949 8.60576C15.3113 8.52215 15.2121 8.45583 15.1029 8.41056C14.9937 8.3653 14.8767 8.34199 14.7585 8.34196C14.5198 8.34189 14.2908 8.43667 14.1219 8.60543L12.0007 10.728L9.87939 8.60676C9.71063 8.43791 9.48171 8.34302 9.24298 8.34295C9.00425 8.34289 8.77528 8.43767 8.60643 8.60643C8.43758 8.77519 8.34268 9.00411 8.34262 9.24284C8.34256 9.48157 8.43733 9.71054 8.60609 9.87939L10.7287 12L8.60743 14.1213C8.43858 14.29 8.34368 14.519 8.34362 14.7577C8.34356 14.9964 8.43833 15.2254 8.60709 15.3942C8.77586 15.5631 9.00478 15.658 9.24351 15.658C9.48223 15.6581 9.71121 15.5633 9.88006 15.3946L12.0007 13.272L14.1219 15.3932C14.2907 15.5621 14.5196 15.657 14.7584 15.657C14.9971 15.6571 15.2261 15.5623 15.3949 15.3936C15.5638 15.2248 15.6586 14.9959 15.6587 14.7572C15.6588 14.5184 15.564 14.2895 15.3952 14.1206L13.2726 12H13.274ZM20.4851 20.4851C25.1716 15.7986 25.1716 8.20144 20.4851 3.5149C15.7986 -1.17163 8.20144 -1.17163 3.5149 3.5149C-1.17163 8.20144 -1.17163 15.7986 3.5149 20.4851C8.20144 25.1716 15.7986 25.1716 20.4851 20.4851ZM19.2118 19.2118C15.2292 23.1957 8.77076 23.1957 4.78753 19.2118C0.804312 15.2292 0.804312 8.77076 4.78753 4.78753C8.77076 0.804312 15.2292 0.804312 19.2125 4.78753C23.1957 8.77076 23.1957 15.2292 19.2125 19.2125L19.2118 19.2118Z"
                fill="#fff" />
            </g>
            <defs>
              <clipPath id="clip0_8878_12">
                <rect width="24" height="24" fill="white" transform="matrix(1 0 0 -1 0 24)" />
              </clipPath>
            </defs>
          </svg>
        </div>
        <img class="header_logo pointer" src=".//assets/img/index/logo.webp" alt="">
      </div>
      <form action="" class="login_popup_form">
        <div class="login_popup_form_input">
          <input type="text" placeholder="아이디를 입력하세요">
        </div>
        <div class="login_popup_form_input">
          <input type="password" id="login_password_input" placeholder="비밀번호">
          <div id="login_password_img" class=" flex flex-center">
            <img src="" alt="" class="pointer">
          </div>
        </div>
      </form>
      <!-- <div class="login_popup_forget">비밀번호를 잊으셨나요?</div> -->
      <div class="login_popup_btn">로그인</div>
      <div class="login_popup_to_registe">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path
            d="M7.5 7.2C7.65 4.96875 9.4875 3.15 11.7188 3.01875C14.325 2.86875 16.5 4.93125 16.5 7.51875C16.5 9.99375 14.4937 12.0187 12 12.0187C9.4125 12.0187 7.33125 9.825 7.5 7.2ZM13.4813 18C13.4813 16.2937 14.4375 14.7937 15.8438 14.0437C14.4375 13.6875 13.0312 13.5 11.9813 13.5C9 13.5 3 15 3 18V20.25C3 20.6625 3.3375 21 3.75 21H14.625C13.9125 20.2125 13.4813 19.1625 13.4813 18ZM21 17.25H18.75V15H17.25V17.25H15V18.75H17.25V21H18.75V18.75H21V17.25Z"
            fill="white" />
        </svg>
        회원가입
      </div>
    </div>
  </div>
  <div class="register_popup">
    <div class="register_popup_box">
      <div class="register_popup_tit">
        <div class="head-close">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <g clip-path="url(#clip0_8878_12)">
              <path
                d="M13.274 12L15.3946 9.87873C15.5634 9.70996 15.6583 9.48104 15.6584 9.24231C15.6584 9.00359 15.5637 8.77461 15.3949 8.60576C15.3113 8.52215 15.2121 8.45583 15.1029 8.41056C14.9937 8.3653 14.8767 8.34199 14.7585 8.34196C14.5198 8.34189 14.2908 8.43667 14.1219 8.60543L12.0007 10.728L9.87939 8.60676C9.71063 8.43791 9.48171 8.34302 9.24298 8.34295C9.00425 8.34289 8.77528 8.43767 8.60643 8.60643C8.43758 8.77519 8.34268 9.00411 8.34262 9.24284C8.34256 9.48157 8.43733 9.71054 8.60609 9.87939L10.7287 12L8.60743 14.1213C8.43858 14.29 8.34368 14.519 8.34362 14.7577C8.34356 14.9964 8.43833 15.2254 8.60709 15.3942C8.77586 15.5631 9.00478 15.658 9.24351 15.658C9.48223 15.6581 9.71121 15.5633 9.88006 15.3946L12.0007 13.272L14.1219 15.3932C14.2907 15.5621 14.5196 15.657 14.7584 15.657C14.9971 15.6571 15.2261 15.5623 15.3949 15.3936C15.5638 15.2248 15.6586 14.9959 15.6587 14.7572C15.6588 14.5184 15.564 14.2895 15.3952 14.1206L13.2726 12H13.274ZM20.4851 20.4851C25.1716 15.7986 25.1716 8.20144 20.4851 3.5149C15.7986 -1.17163 8.20144 -1.17163 3.5149 3.5149C-1.17163 8.20144 -1.17163 15.7986 3.5149 20.4851C8.20144 25.1716 15.7986 25.1716 20.4851 20.4851ZM19.2118 19.2118C15.2292 23.1957 8.77076 23.1957 4.78753 19.2118C0.804312 15.2292 0.804312 8.77076 4.78753 4.78753C8.77076 0.804312 15.2292 0.804312 19.2125 4.78753C23.1957 8.77076 23.1957 15.2292 19.2125 19.2125L19.2118 19.2118Z"
                fill="#fff" />
            </g>
            <defs>
              <clipPath id="clip0_8878_12">
                <rect width="24" height="24" fill="white" transform="matrix(1 0 0 -1 0 24)" />
              </clipPath>
            </defs>
          </svg>
        </div>
        <img class="header_logo pointer" src=".//assets/img/index/logo.webp" alt="">
      </div>
      <!-- <div class="registe_popup_to">
                이미 계정을 가지고 계신가요?
                <span class="pointer registe_popup_to_login">로그인</span>
            </div> -->
      <form action="" class="register_popup_form">
        <div class="register_popup_form_input">
          <input type="text" id="register_id_input" placeholder="아이디">
          <!-- <div id="register_password_btn" class=" flex flex-center">
            중복체크
          </div> -->
        </div>
        <div class="register_popup_form_input" style="margin-bottom: 18px;">
          <input type="password" id="register_password_input" placeholder="비밀번호">
          <div id="register_password_img" class=" flex flex-center">
            <img src="" alt="" class="pointer">
          </div>
        </div>
        <div class="register_popup_form_input" style="margin-bottom: 18px;">
          <input type="password" id="register_password_input2" placeholder="비밀번호 확인">
          <div id="register_password_img2" class=" flex flex-center">
            <img src="" alt="" class="pointer">
          </div>
        </div>
        <!-- <div class="register_popup_form_input">
          <input type="text" placeholder="연락처" id="register_phone_input">
        </div> -->
      </form>
      <!-- <div class="register_popup_desc">
        *회원님의 개인정보는 최고수준의 보안으로 철저히 보호되며 안전하게 관리됩니다. <br>
        회원 탈퇴 시 개인정보는 안전히 폐기되오니 참고 부탁드립니다.
      </div> -->
      <div class="register_popup_btnList">
        <!-- <div class="register_popup_btn" id="quite_register">가입취소</div> -->
        <div class="register_popup_btn" id="to_register_api">회원가입</div>
      </div>
      <div class="is_already">
        이미 회원이세요?<span class="registe_popup_to_login">바로 로그인</span>
      </div>
    </div>
  </div>
  <div class="money_popup">
    <div class="money_popup_box">
      <div class="money_popup_box_head">
        <div class="money_popup_box_head_l flex flex-a-center">
          <span>충전</span>
          <img src=".//assets/svg/index/question-mark.svg" alt="">
        </div>
        <div class="money_popup_box_head_r pointer" id="charge-close">
          <img src=".//assets/svg/login/close.svg" alt="">
        </div>
      </div>
      <div class="money_popup_box_body">
        <div class="money_popup_box_price">
          <img src=".//assets/img/index/price_bg.webp" alt="">
          <div class="money_popup_box_price_inner">
            <div class="money_popup_box_price_l">
              <div class="money_popup_box_price_l_t">
                <img src=".//assets/img/index/vip_icon.webp" alt="">
                <span>VIP</span>
              </div>
              <div class="money_popup_box_price_l_c">
                일주일 동안 모든 시리즈 잠금 해제
              </div>
              <div class="money_popup_box_price_l_b">
                자동 갱신 구독, 언제든지 취소 가능
              </div>
            </div>
            <div class="money_popup_box_price_r">
              <div class="money_popup_box_price_r_t">
                <span>₩</span>
                <span>17800</span>
                <span>/주</span>
              </div>
              <div class="money_popup_box_price_r_b">
                <span>₩</span>
                <span>17800</span>
              </div>
            </div>
          </div>
          <div class="money_popup_box_price_count">
            <span>-50%</span>
            <span id="countdown">00:20:00</span>
          </div>
          <div class="money_popup_box_price_tit">기간 한정 할인</div>
        </div>
        <div class="money_popup_box_card card1">
          <img class="diamond_bg" src=".//assets/img/index/diamond_bg.png" alt="">
          <div class="money_popup_box_card_t flex flex-a-center">
            <img src=".//assets/img/index/vip_icon.webp" alt="">
            VIP
          </div>
          <div class="money_popup_box_card_c">
            <span>₩</span>
            <span>33800</span>
            <span>/월</span>
          </div>
          <div class="money_popup_box_card_b">
            <span>₩</span>
            <span>42250</span>
          </div>
          <div class="money_popup_box_card_rt">
            최고의 가치
          </div>
        </div>
        <div class="money_popup_box_card card2">
          <img class="diamond_bg" src=".//assets/img/index/diamond_bg.png" alt="">
          <div class="money_popup_box_card_t flex flex-a-center">
            <img src=".//assets/img/index/vip_icon.webp" alt="">
            VIP
          </div>
          <div class="money_popup_box_card_c">
            <span>₩</span>
            <span>274800</span>
            <span>/년</span>
          </div>
          <div class="money_popup_box_card_b">
            <span>₩</span>
            <span>17800</span>
          </div>
        </div>
        <div class="money_popup_box_more">
          더 많은 패키지
          <img src=".//assets/svg/index/toTop.svg" alt="">
        </div>
        <div class="money_popup_box_bbox">
          <div class="money_popup_box_card cardremaining">
            <div class="money_popup_box_card_t flex flex-a-center">
              <img src=".//assets/svg/index/diamond.svg" alt="">
              90
            </div>
            <div class="money_popup_box_card_c">
              <span>₩</span>
              <span>274800</span>
            </div>
          </div>
          <div class="money_popup_box_card cardremaining">
            <div class="money_popup_box_card_t flex flex-a-center">
              <img src=".//assets/svg/index/diamond.svg" alt="">
              240
            </div>
            <div class="money_popup_box_card_c">
              <span>₩</span>
              <span>29800</span>
            </div>
          </div>
          <div class="money_popup_box_card cardremaining">
            <div class="money_popup_box_card_t flex flex-a-center">
              <img src=".//assets/svg/index/diamond.svg" alt="">
              480
            </div>
            <div class="money_popup_box_card_c">
              <span>₩</span>
              <span>54800</span>
            </div>
          </div>
          <div class="money_popup_box_card cardremaining">
            <div class="money_popup_box_card_t flex flex-a-center">
              <img src=".//assets/svg/index/diamond.svg" alt="">
              600
            </div>
            <div class="money_popup_box_card_c">
              <span>₩</span>
              <span>68800</span>
            </div>
          </div>
          <div class="money_popup_box_btn">
            <div>지금 충전하기</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .all_drop {
      visibility: hidden;
      background-color: #1d1f22;
      position: absolute;
      right: 0;
      --tw-shadow: 0 4px 20px 0 rgba(0, 0, 0, .5);
      --tw-shadow-colored: 0 4px 20px 0 #000;
      box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 4px 20px 0 rgba(0, 0, 0, .5);
      opacity: 0;
      transition: all 0.5s;
    }

    .header {
      width: 100%;
      color: #C6C6C6;
      font-weight: bold;
      top: 0;
      left: 0;
      z-index: 2;
      transition: all 0.5s;
    }

    .header_inner {
      max-width: 1600px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      height: 62px;
    }

    .header-right {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header_inner_mobile {
      display: none;
    }

    .header_logo {
      height: 62px;
      width: auto;
      margin-right: 30px;
    }

    .header_route {
      margin: 0 12px;
    }

    .header_route.active {
      color: #F37021;
      font-size: 20px;
      font-weight: 700;
    }

    .header_app {
      margin: 0 15px;
      display: flex;
      align-items: flex-end;
    }

    .header_app>img {
      width: 10px;
      height: 17px;
      margin-right: 5px;
    }

    .header_search_inner {
      width: 100%;
      justify-content: flex-end;
    }

    .header_search {
      width: 240px;
      height: 36px;
      background: rgba(255, 255, 255, 0.2);
      flex: 1;
      border-radius: 4px;
      justify-content: flex-end;
    }

    .header_search .search_icon {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    .header_search_inner.active {
      justify-content: space-between;
      background: #fff3;
      border-radius: 18px;
      height: 32px;
      max-width: 300px;
      padding: 4px 12px 4px 16px;
    }

    .header_search_inner_input {
      width: 0;
      display: none;
      transition: all 0.5s;
      overflow: hidden;
    }

    .header_search_inner.active .header_search_inner_input {
      flex: 1;
      width: 100%;
      position: relative;
      border-right: 1px solid #999;
      padding-right: 5px;
      display: flex;
    }

    .search_input {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      box-sizing: border-box;
      /* background-color: transparent; */
      border: none;
      color: #fff;
    }

    .search_input:focus-visible {
      outline: none;
    }

    .header_b {
      margin: 0 27px;
      color: #fff;
      position: relative;
      height: 100%;
    }

    .header_b>svg {
      margin-left: 5px;
      width: 13px;
      height: 7px;
      transition: all 0.5s;
    }

    .header_b.active>svg {
      transform: rotate(180deg);
    }

    .header_b.active>svg path {
      fill: #F37021;
    }

    .header_b_drop {
      width: 120px;
      height: 351px;
      bottom: -341px;
      z-index: -10;
      padding: 10px 0;
    }

    .header_b.active .header_b_drop {
      visibility: visible;
      opacity: 1;
      z-index: 10;
    }

    .header_b.active>span {
      color: #F37021;
    }

    .header_b_drop_item {
      text-align: center;
      padding: 10px 0;
    }

    .header_bell {
      margin: 0 27px;
      position: relative;
      height: 100%;
    }

    .header_bell_drop {
      width: 300px;
      height: 351px;
      bottom: -340px;
      right: -61px;
      z-index: -10;
      border-radius: 10px;
    }

    .header_bell.active .header_bell_drop {
      visibility: visible;
      opacity: 1;
      z-index: 10;
    }

    .header_bell.active>svg path {
      fill: #F37021;
    }

    .header_bell_drop_head {
      padding: 20px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
    }

    .header_bell_drop_body {
      flex: 1;
    }

    .header_bell_drop_body>img {
      width: 100px;
      height: 100px;
    }

    .header_time_drop {
      width: 300px;
      height: 200px;
      bottom: -210px;
      left: -105px;
      z-index: -10;
      border-radius: 10px;
    }

    .header_time.active .header_time_drop {
      visibility: visible;
      opacity: 1;
      z-index: 10;
    }

    .header_time.active>svg path {
      fill: #F37021;
    }

    .header_time {
      color: #fff;
      height: 100%;
      position: relative;
      left: 20px;
    }

    .header_time span {
      white-space: nowrap;
    }

    .header_time.active>span {
      color: #F37021;
    }

    .header_time>svg {
      margin-right: 10px;
    }

    .header_btn {
      margin-left: 45px;
      width: 131px;
      height: 38px;
      border-radius: 5px;
      background: #F37021;
      color: #000;
      font-weight: 500;
    }

    .header_btn:hover {
      opacity: 0.9;
    }

    .header_btn#open_sign {
      background-color: transparent !important;
      border: 2px solid #F37021;
      color: #fff;
    }

    .login_popup,
    .register_popup,
    .money_popup,
    .email_popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .login_popup_box,
    .register_popup_box {
      position: relative;
      width: 95%;
      max-width: 615px;
      border-radius: 20px;
      background: #141619;
      padding: 26px 46px 30px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .is_already {
      margin-top: 20px;
      color: #8C8F91;
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
    }

    .is_already span {
      cursor: pointer;
      margin-left: 10px;
      color: #F37021;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
    }

    .login_popup_tit,
    .register_popup_tit {
      color: #FFF;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
      margin-top: 14px;
    }

    .login_popup_to,
    .registe_popup_to {
      font-size: 12px;
      font-weight: 200;
      line-height: 11.435px;
      margin: 18px 0 23px;
    }

    .head-close {
      position: absolute;
      right: 17px;
      top: 20px;
      cursor: pointer;
    }

    .login_popup_to>span,
    .registe_popup_to>span {
      color: #F37021;
      margin-left: 6px;
    }

    .login_popup_other {
      width: 100%;
      justify-content: space-between;
    }

    .login_popup_other_g,
    .login_popup_other_f,
    .login_popup_other_i {
      border-radius: 64.063px;
      background-color: #2C2E30;
      height: 41px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .login_popup_other_g:hover,
    .login_popup_other_f:hover,
    .login_popup_other_i:hover {
      background-color: #535455;
    }

    .login_popup_other_g {
      width: 52.3%;
      position: relative;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.7px;
    }

    .login_popup_other_g>img {
      position: absolute;
      top: 0;
      left: 0;
    }

    .login_popup_other_f,
    .login_popup_other_i {
      width: 16.9%;
    }

    .login_popup_or {
      width: 100%;
      margin: 18px 0;
    }

    .login_popup_or_line {
      flex: 1;
      height: 1px;
      background-color: #30343A;
    }

    .login_popup_or_txt {
      color: #4D4D4D;
      font-size: 12px;
      font-weight: 500;
      margin: 0 12px;
    }

    .login_popup_info {
      color: #F37021;
      font-size: 14px;
      font-weight: 600;
    }

    .login_popup_form,
    .register_popup_form {
      width: 100%;
      padding: 20px 0;
    }

    .login_popup_form_input,
    .register_popup_form_input {
      height: 48px;
      border-radius: 50px;
      background: #2C2E30;
      display: flex;
      align-items: center;
      padding: 0 21px;
    }

    .register_popup_form_input #register_password_btn {
      height: 36px;
      padding: 0 4px;
      border-radius: 50px;
      font-size: 14px;
      background: #F37021;
      position: relative;
      right: -10px;
      cursor: pointer;
    }

    .login_popup_form_input>input,
    .register_popup_form_input>input {
      background-color: transparent;
      flex: 1;
      height: 42px;
      border: none;
      color: #fff;
      outline: none;
    }

    .login_popup_form_input:first-of-type,
    .register_popup_form_input:first-of-type {
      margin-bottom: 18px;
    }

    #login_password_img,
    #register_password_img,
    #register_password_img2 {
      height: 100%;
      width: 24px;
    }

    #login_password_img>img,
    #register_password_img>img,
    #register_password_img2>img {
      width: 24px;
      height: 12px;
      margin-left: 21px;
    }

    .login_popup_forget,
    .register_popup_forget {
      width: 100%;
      color: #F37021;
      font-size: 12px;
      font-weight: 200;
      cursor: pointer;
    }

    .login_popup_btn,
    .register_popup_btn,
    .login_popup_to_registe {
      width: 100%;
      height: 42px;
      line-height: 42px;
      border-radius: 50px;
      background-color: #F37021;
      text-align: center;
      font-size: 16px;
      margin-top: 24px;
      cursor: pointer;
    }

    .register_popup_btn#to_register_api {
      background-color: #F37021;
    }

    .register_popup_btnList {
      width: 100%;
      display: flex;
      gap: 40px;
    }

    .login_popup_to_registe {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background-color: #fad68e;
      margin-top: 10px;
    }

    .login_popup_btn:hover,
    .register_popup_btn:hover {
      opacity: 0.8;
    }

    .register_popup_desc {
      text-align: center;
      color: #8C8F91;
      font-size: 13px;
      font-weight: 200;
      margin-top: 20px;
    }

    .register_popup_desc>font {
      color: #F37021;
      font-weight: 500;
    }

    .header_recharge {
      height: 100%;
    }

    .header_recharge_inner {
      height: 36px;
      border-radius: 18px;
      background: rgba(255, 132, 0, 0.16);
      padding: 0 10px;
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      transition: all .5s;
    }

    .header_recharge:hover .header_recharge_inner {
      border: 1px solid #FF8400;
    }

    .header_recharge:hover .header_recharge_inner>svg>rect {
      fill: #FF8400;
    }

    .header_recharge_drop_h>svg {
      margin-right: 6px;
    }

    .header_recharge_diamond {
      width: 24px;
      height: 24px;
    }

    .header_recharge_inner>span {
      color: #fff;
      margin-left: 14px;
      margin-right: 8px;
      font-size: 14px;
      font-weight: 200;
    }

    .header_recharge_add {
      width: 16px;
      height: 16px;
    }

    .header_userlogo {
      margin-left: 44px;
      height: 100%;
      cursor: pointer;
      position: relative;
    }

    .header_userlogo .header_userlogo_img {
      height: 40px;
      width: 40px;
    }

    .header_recharge_drop {
      width: 285px;
      height: 216px;
      bottom: -226px;
      z-index: -10;
      border-radius: 10px;
      padding: 12px 16px;
    }

    .header_recharge.active .header_recharge_drop {
      visibility: visible;
      opacity: 1;
      z-index: 10;
    }

    .header_recharge_drop_h {
      color: #8E8F90;
      font-size: 12px;
      font-weight: 200;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 18px;
    }

    .header_recharge_drop_b_item {
      display: flex;
      font-size: 14px;
      font-weight: 200;
      margin-bottom: 12px;
      color: #fff;
    }

    .header_recharge_drop_b_item_img {
      width: 24px;
      height: 24px;
      background-color: #4F3611;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 6px;
    }

    .header_recharge_drop_b_btn {
      width: 100%;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border-radius: 8px;
      background: linear-gradient(90deg, #F2D6A9 0%, #F1BA82 100%);
      color: #814D00;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.7px;
      margin-top: 24px;
    }

    .header_userlogo.active .header_userlogo_drop {
      visibility: visible;
      opacity: 1;
      z-index: 10;
    }

    .header_userlogo_drop {
      width: 285px;
      height: 260px;
      bottom: -260px;
      left: -115px;
      z-index: -10;
      border-radius: 10px;
      padding: 16px 12px;
      color: #fff;
    }

    .header_userlogo_drop_head {
      padding: 8px 0 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.13);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .header_userlogo_drop_head>img {
      width: 64px;
      height: 64px;
      margin-bottom: 19px;
    }

    .header_userlogo_drop_body {
      display: flex;
      flex-direction: column;
      padding-top: 20px;
    }

    .header_userlogo_drop_body_item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }

    .header_userlogo_drop_body_item:hover {
      opacity: 0.8;
    }

    .header_userlogo_drop_body_item>img {
      margin-right: 8px;
    }

    .money_popup_box {
      width: 95%;
      max-width: 614px;
      border-radius: 20px;
      background: #141619;
      padding: 8px 24px 32px;
    }

    .money_popup_box_head {
      display: flex;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    }

    .money_popup_box_head_l {
      flex: 1;
    }

    .money_popup_box_head_l>span {
      font-size: 20px;
      font-weight: 600;
      margin-right: 8px;
    }

    .money_popup_box_price {
      width: 100%;
      border-radius: 10px;
      position: relative;
    }

    .money_popup_box_body {
      padding-top: 33px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .money_popup_box_price_inner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 25px 16px 16px;
      display: flex;
      justify-content: space-between;
      gap: 10%;
    }

    .money_popup_box_price_r,
    .money_popup_box_price_l {
      flex: 1;
    }

    .money_popup_box_price_l_t {
      display: flex;
      align-items: center;
    }

    .money_popup_box_price_l_t>img {
      width: 38px;
      height: 38px;
      margin-right: 8px;
    }

    .money_popup_box_price_l_t>span {
      font-family: "Alibaba PuHuiTi";
      font-size: 24px;
      font-weight: 1000;
    }

    .money_popup_box_price_l_c {
      width: 100%;
      height: 32px;
      border-radius: 4px;
      background: #FFEA62;
      color: #814D00;
      font-family: "S-Core Dream";
      font-size: 14px;
      font-weight: 500;
      line-height: 32px;
      text-align: center;
      margin: 8px 0;
    }

    .money_popup_box_price_l_b {
      font-size: 12px;
      font-weight: 500;
    }

    .money_popup_box_price_r_t>span:nth-child(1) {
      font-size: 32px;
      font-weight: 200;
    }

    .money_popup_box_price_r_t>span:nth-child(2) {
      font-size: 32px;
      font-weight: 500;
      margin-left: 4px;
    }

    .money_popup_box_price_r_t>span:nth-child(3) {
      font-size: 14px;
      font-weight: 300;
    }

    .money_popup_box_price_r_b {
      font-size: 20px;
      font-weight: 500;
      margin-top: 16px;
    }

    .money_popup_box_price_r_b>span:nth-child(2) {
      text-decoration-line: line-through;
    }

    .money_popup_box_price_count {
      position: absolute;
      top: -16px;
      left: 0;
      width: 153px;
      height: 32px;
      line-height: 32px;
      border-radius: 6px 8px 6px 0px;
      background: #FFEA62;
      color: #814D00;
      font-size: 14px;
      display: flex;
      justify-content: center;
      gap: 24px;
    }

    .money_popup_box_price_tit {
      position: absolute;
      top: 0;
      right: 0;
      width: 121px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 0px 8px 0px 10px;
      background: #FFEA62;
      color: #814D00;
      font-size: 14px;
      font-weight: 500;
    }

    .money_popup_box_card {
      position: relative;
      width: calc(50% - 8px);
      height: 140px;
      padding: 16px 20px;
    }

    .money_popup_box_card .diamond_bg {
      position: absolute;
      bottom: 4px;
      right: 0;
      width: 97px;
      height: 87px;
    }

    .money_popup_box_card.card1 {
      border-radius: 10px;
      border: 1px solid #FE5442;
      background: linear-gradient(90deg, #35184D 0%, #5B1985 47.62%, #36184C 100%);
    }

    .money_popup_box_card.card2 {
      border-radius: 10px;
      border: 1px solid #595959;
      background: #141619;
    }

    .money_popup_box_card_t>img {
      width: 38px;
      height: 38px;
      margin-right: 8px;
    }

    .money_popup_box_card_t {
      color: #F2D3A4;
      font-family: "Alibaba PuHuiTi";
      font-size: 24px;
      font-weight: 1000;
    }

    .money_popup_box_card_c {
      margin: 16px 0 4px;
    }

    .money_popup_box_card_c>span:nth-child(1) {
      color: #F2D3A4;
      font-size: 24px;
      font-weight: 200;
    }

    .money_popup_box_card_c>span:nth-child(2) {
      color: #F2D3A4;
      font-size: 24px;
      font-weight: 500;
    }

    .money_popup_box_card_c>span:nth-child(3) {
      color: #F2D3A4;
      font-size: 14px;
      font-weight: 300;
    }

    .money_popup_box_card_b {
      color: #FFF;
      font-size: 16px;
      font-weight: 500;
      opacity: 0.5;
    }

    .money_popup_box_card_b>span:nth-child(2) {
      text-decoration-line: line-through;
    }

    .money_popup_box_card_rt {
      position: absolute;
      width: 104px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 0px 9px 0px 10px;
      background: #FE5442;
      top: 0;
      right: 0;
      font-size: 14px;
      font-weight: 500;
    }

    .money_popup_box_more {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }

    .money_popup_box_more:hover {
      opacity: 0.8;
    }

    .money_popup_box_more>img {
      margin-left: 4px;
    }

    .money_popup_box_bbox {
      height: 0;
      width: 100%;
      transition: all 0.5s;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .money_popup_box_card.cardremaining {
      flex: 0 0 calc(50% - 8px);
      height: 100px;
      border-radius: 10px;
      border: 1px solid #595959;
      background: linear-gradient(180deg, #161719 0%, #2C221A 100%);
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .money_popup_box_card.cardremaining .money_popup_box_card_t img {
      width: 28px;
      height: 28px;
    }

    .money_popup_box_card.cardremaining .money_popup_box_card_t {
      color: #FFF;
      font-family: "Alibaba PuHuiTi";
      font-size: 24px;
      font-weight: 1000;
    }

    .money_popup_box_card.cardremaining .money_popup_box_card_c {
      margin: 0;
    }

    .money_popup_box_card.cardremaining .money_popup_box_card_c>span {
      color: #F2D3A4;
      font-size: 16px;
      font-weight: 500;
    }

    .money_popup_box_btn {
      flex: 0 0 100%;
    }

    .money_popup_box_btn>div {
      width: 50%;
      height: 52px;
      flex-shrink: 0;
      border-radius: 8px;
      background: linear-gradient(90deg, #FC9243 0%, #FE5442 100%);
      margin: 0 auto;
      color: #FFF;
      text-align: center;
      font-size: 20px;
      font-weight: 500;
      line-height: 52px;
      margin-top: 35px;
      cursor: pointer;
    }

    .pc-show {
      display: flex;
    }

    .mobile-show {
      display: none;
    }

    @media (max-width: 650px) {
      .pc-show {
        display: none;
      }

      .mobile-show {
        display: block;
      }

      .login_popup_box,
      .register_popup_box {
        padding: 26px 26px 30px;
      }

      .header-left {
        display: flex;
        height: 48px;
        padding: 0 16px;
      }

      .register_popup_form_input {
        padding: 0 18px !important;
      }

      .header_inner_right_m_top {
        /* background-color: #152E3F; */
        display: flex;
        align-items: center;
      }

      .header_inner_right_m_top>.header_inner_logo {
        height: 25.4px;
        width: auto;
        margin-left: 30px;
      }

      .header_inner_right_m_top>.header_inner_menu {
        width: 24px;
        cursor: pointer;
      }

      #register_password_btn {
        font-size: 12px !important;
        padding: 0 8px !important;
      }

      .register_popup_desc {
        font-size: 9px;
        color: #8C8F91;
        font-weight: 500;
      }

      .header_search {
        margin: 10px;
      }

      .header_inner_right_m .button {
        display: inline-flex;
        height: 32px;
        width: 80px;
        /* padding: 8px 2px; */
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        font-size: 12px;
        font-family: "Montserrat Alternates";
      }

      .register_btn {
        border: 1px solid #fff;
      }

      .login_btn {
        background: #F37021;
        font-size: 12px;
        font-weight: 600;
      }

      .header_inner_right_m {
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
      }

      .header_inner_right_m img {
        width: 32px;
        height: 32px;
      }



      .header {
        background-color: #000;
      }

      .header_inner {
        padding: 0 10px;
      }

      .header_route,
      .header_app,
      .header_b,
      .header_time>span,
      .app_header_box_play {
        display: none !important;
      }

      .header_inner_mobile {
        display: flex !important;
      }

      .header_inner_mobile .header_route,
      .header_inner_mobile .header_app {
        display: flex !important;
      }

      .header_logo {
        width: 106px;
        height: 30px;
        margin-right: 0;
      }

      .header_bell {
        margin: 0 16px;
      }

      .header_time svg {
        margin: 0;
      }

      .header_userlogo {
        margin-left: 16px;
      }

      .header_recharge {
        margin-left: 8px;
      }

      .header_recharge_inner {
        height: 24px;
      }

      .header_recharge_inner>img {
        width: 16px;
        height: 16px;
      }

      .header_recharge_inner>svg {
        width: 10px;
        height: 10px;
      }

      .header_userlogo_img {
        width: 32px;
        height: 32px;
      }

      .header_search_inner.active {
        max-width: 100px;
      }

      .all_drop {
        position: fixed;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  </style>
  <script>
    $(document).ready(function () {
      // $('.cont-left').hide()
      $('.header_inner_menu').click(function () {
        $('.cont-left').show()
      })
      if (isLogin) {
        $('#open_login').hide()
        $('#open_sign').hide()
        $('#openm_login').hide()
        $('#openm_sign').hide()
      } else {
        $('.header_recharge').hide()
        $('.header_userlogo').hide()
      }
      const currentRoute = window.location.pathname;
      const parent = $('.search_icon').parent();
      $('.search_icon').click(function () {
        const parentHasClass = parent.hasClass('active');
        if (parentHasClass) {
          // window.location.href = 'search.html';
          parent.removeClass('active')
        } else {
          parent.addClass('active')
        }
      })
      $('.close_icon').click(function () {
        parent.removeClass('active')
      })
      $('.header_logo').click(function () {
        window.location.href = 'index.html';
      })
      $('.header_route').click(function () {
        const url = $(this).data('url')
        window.location.href = url;
      })
      $('.to_page').click(function () {
        const url = $(this).data('url')
        window.location.href = url;
      })
      $('.header_route').each(function () {
        if (currentRoute.includes($(this).data('url'))) $(this).addClass('active')
      })
      $('.header_b').mouseenter(function () {
        $('.header_b').addClass('active');
      }).mouseleave(function () {
        $('.header_b').removeClass('active');
      });
      $('#login_password_img>img,#register_password_img>img,#register_password_img2>img').attr('src', './/assets/svg/login/show-password.svg');
      $('#login_password_img').click(function () {
        const passwordInput = $('#login_password_input');
        const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
        passwordInput.attr('type', type);
        if (type === "password")
          $('#login_password_img>img').attr('src', './/assets/svg/login/show-password.svg');
        else $('#login_password_img>img').attr('src', './/assets/svg/login/hidden-password.svg');
      });
      $('#register_password_img').click(function () {
        const passwordInput = $('#register_password_input');
        const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
        passwordInput.attr('type', type);
        if (type === "password")
          $('#register_password_img>img').attr('src', './/assets/svg/login/show-password.svg');
        else $('#register_password_img>img').attr('src', './/assets/svg/login/hidden-password.svg');
      });
      $('#register_password_img2').click(function () {
        const passwordInput = $('#register_password_input2');
        const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
        passwordInput.attr('type', type);
        if (type === "password")
          $('#register_password_img2>img').attr('src', './/assets/svg/login/show-password.svg');
        else $('#register_password_img2>img').attr('src', './/assets/svg/login/hidden-password.svg');
      });
      // $('.login_popup').click(function (e) {
      //     if ($(e.target).is(this)) {
      //         $(this).hide();
      //     }
      // })
      let isMouseDownInside = false;
      $('.login_popup')
        .mousedown(function (e) {
          if ($(e.target).is(this)) {
            isMouseDownInside = true;
          } else {
            isMouseDownInside = false;
          }
        })
        .mouseup(function (e) {
          if (isMouseDownInside && $(e.target).is(this)) {
            $(this).hide();
          }
          isMouseDownInside = false;
        })
        .mouseleave(function () {
          isMouseDownInside = false;
        });

      let isMouseDownInside2 = false;
      $('.register_popup')
        .mousedown(function (e) {
          if ($(e.target).is(this)) {
            isMouseDownInside2 = true;
          } else {
            isMouseDownInside2 = false;
          }
        })
        .mouseup(function (e) {
          if (isMouseDownInside2 && $(e.target).is(this)) {
            $(this).hide();
          }
          isMouseDownInside2 = false;
        })
        .mouseleave(function () {
          isMouseDownIisMouseDownInside2nside = false;
        });
      // $('.register_popup').click(function (e) {
      //     if (e.target === this) {
      //         $(this).hide();
      //     }
      // })
      $('#open_login, #openm_login').click(function () {
        $('.login_popup').css('display', 'flex')
      })
      $('#open_sign,#openm_sign').click(function () {
        $('.register_popup').css('display', 'flex')
      })
      $('.login_popup_to_registe').click(function () {
        $('.login_popup').hide()
        $('.register_popup').css('display', 'flex')
      })
      $('.registe_popup_to_login').click(function () {
        $('.register_popup').hide()
        $('.login_popup').css('display', 'flex')
      })
      $('#quite_register').click(function () {
        $('.register_popup').hide()
      })
      $('.head-close').click(function () {
        $('.login_popup').hide()
        $('.register_popup').hide()
      })
      // $('.login_popup_btn').click(function () {
      //   localStorage.setItem('userInfo', 'name:""')
      //   $('.login_popup').hide()
      //   $('#open_login').hide()
      //   $('#open_sign').hide()
      //   $('.header_recharge').show()
      //   $('.header_userlogo').show()
      // })
      $('#loging-quite').click(function () {
        logout();
        // localStorage.removeItem('userInfo');
        $('.header_userlogo').removeClass('active');
        $('#open_login').show()
        $('#open_sign').show()
        $('.header_recharge').hide()
        $('.header_userlogo').hide()
      })
      let totalSeconds = 20 * 60;
      const countdownInterval = setInterval(function () {
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        const display = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        $('#countdown').text(display);

        if (totalSeconds > 0) {
          totalSeconds--;
        } else {
          clearInterval(countdownInterval);
        }
      }, 1000);
      $('.money_popup_box_more').click(function () {
        $(this).hide()
        $('.money_popup_box_bbox').css('height', '320px')
      })
      $('#charge-close').click(function () {
        $('.money_popup').hide();
      })
      $('.header_recharge_drop_b_btn').click(function () {
        $('.money_popup').css('display', 'flex');
      })
      // if (isPC) {
      $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
          $('.header').css('background-color', '#000');
        } else {
          $('.header').css('background-color', 'unset');
        }
      });
      $('.header_recharge').mouseenter(function () {
        $('.header_recharge').addClass('active');
      }).mouseleave(function () {
        $('.header_recharge').removeClass('active');
      });
      $('.header_bell').mouseenter(function () {
        $('.header_bell').addClass('active');
      }).mouseleave(function () {
        $('.header_bell').removeClass('active');
      });
      $('.header_time').mouseenter(function () {
        $('.header_time').addClass('active');
      }).mouseleave(function () {
        $('.header_time').removeClass('active');
      });
      $('.header_userlogo').mouseenter(function () {
        $('.header_userlogo').addClass('active');
      }).mouseleave(function () {
        $('.header_userlogo').removeClass('active');
      });
      // } else {
      //     $('.header_recharge').click(function () {
      //         window.location.href = 'recharge.html';
      //     })
      //     $('.header_bell').click(function () {
      //         window.location.href = 'bell.html';
      //     })
      //     $('.header_time').click(function () {
      //         window.location.href = 'history.html';
      //     })
      //     $('.header_userlogo').click(function () {
      //         window.location.href = 'profile.html';
      //     })

      // }
      const token = localStorage.getItem('token');
      if (token) {
        // 已有Token，直接获取用户信息并设置全局请求头
        getUserInfo(token);
        setupGlobalAuthorization();
      }
    })
  </script>
  <script>
    // const API_BASE_URL = 'http://152.89.28.11:9506/api'; // 替换为实际的API前缀
    const API_BASE_URL = '/api'; // 替换为实际的API前缀
    // 登录表单处理
    $(document).ready(function () {
      // 登录按钮点击事件
      $('.login_popup_btn').click(function () {
        login();
      });

      // 表单提交事件
      $('.login_popup_form').submit(function (e) {
        e.preventDefault(); // 阻止表单默认提交
        login();
      });

      // 登录函数
      function login () {
        // 获取表单数据
        const account = $('.login_popup_form_input input[type="text"]').val().trim();
        const $passwordInput = $('#login_password_input'); // 密码输入框
        const password = $passwordInput.val().trim();
        if (!account) {
          alert('请输入ID');
          return;
        }
        if (!password) {
          alert('请输入密码');
          return;
        }

        // 显示加载状态
        $('.login_popup_btn').text('Loading...').prop('disabled', true);

        // 发送登录请求
        $.ajax({
          url: API_BASE_URL + '/user/login', // 替换为实际登录接口地址
          type: 'POST',
          dataType: 'json',
          contentType: 'application/json',
          data: JSON.stringify({
            account: account,
            password: password
          }),
          success: function (response) {
            // 登录成功处理
            if (response.code) {
              // 存储令牌或用户信息
              // localStorage.setItem('userInfo', 'name:""')
              $('.login_popup').hide()
              $('#open_login').hide()
              $('#open_sign').hide()
              $('#openm_login').hide()
              $('#openm_sign').hide()
              $('.header_recharge').show()
              $('.header_userlogo').show()
              const token = localStorage.getItem('token');
              localStorage.setItem('token', response.data.token);
              localStorage.setItem('userInfo', JSON.stringify(response.data));
              getUserInfo(response.data.token);
              // 4. 全局配置：后续所有请求自动添加Authorization头
              setupGlobalAuthorization();
              // 提示登录成功
              alert('success');

              // 关闭登录弹窗或跳转页面
              $('.login_popup').hide();

              // 可以在这里触发页面刷新或跳转
              // window.location.reload();
              // window.location.href = '/home';
            } else {
              alert(response.message || '登录失败，请重试');
            }
          },
          error: function (xhr, status, error) {
            // 错误处理
            console.error('登录请求失败:', error);
            let errorMsg = '网络错误，请稍后重试';

            // 尝试获取服务器返回的错误信息
            if (xhr.responseJSON && xhr.responseJSON.message) {
              errorMsg = xhr.responseJSON.message;
            }

            alert(errorMsg);
          },
          complete: function () {
            // 恢复按钮状态
            $('.login_popup_btn').text('로그인').prop('disabled', false);
          }
        });
      }

    });
    // 3. 调用userinfo接口（带Authorization头）
    function getUserInfo (token) {
      $.ajax({
        url: API_BASE_URL + '/user/info', // 用户信息接口
        type: 'GET',
        headers: {
          // 关键：Authorization格式为 "Bearer " + Token（注意Bearer后有空格）
          'Authorization': 'Bearer ' + token
        },
        success: function (response) {
          if (response) {
            // 处理用户信息（如显示用户名、头像等）
            const userInfo = response.data;

            $('.username').text(userInfo.account);
            console.log('用户信息：', userInfo);
            // $('.header-username').text(userInfo.username); // 在Header显示用户名
            // ...其他UI更新操作
          } else {
            alert('获取用户信息失败：' + response.message);
          }
        },
        error: function (xhr) {
          // Token无效或过期的处理
          if (xhr.status === 401) {
            alert('登录已过期，请重新登录');
            localStorage.removeItem('token'); // 清除无效Token
            localStorage.removeItem('userInfo');
            // 跳转到登录页
            window.location.href = '/index.html';
          } else {
            alert('获取用户信息请求失败');
          }
        }
      });
    }

    // 4. 全局配置：所有后续AJAX请求自动添加Authorization头
    function setupGlobalAuthorization () {
      // 使用jQuery的ajaxSetup统一配置请求头
      $.ajaxSetup({
        beforeSend: function (xhr) {
          // 从localStorage获取Token
          const token = localStorage.getItem('token');
          if (token) {
            // 添加Authorization头
            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
          }
        }
      });
    }
  </script>
  <script>
    $(document).ready(function () {
      $('.header_userlogo_drop_head').click(function () {
        window.location.href = '../userInfo.html'
      })
      // 页面元素缓存
      const $registerPopup = $('.register_popup');
      const $idInput = $('#register_id_input'); // 修正ID重复问题，取第一个作为用户名输入框
      const $passwordInput = $('#register_password_input'); // 密码输入框
      const $confirmPasswordInput = $('#register_password_input2'); // 确认密码输入框
      const $phoneInput = $('.register_popup_form_input input[type="text"]'); // 联系方式输入框
      const $duplicateCheckBtn = $('#register_password_btn'); // 重复检查按钮
      const $passwordImg = $('#register_password_img img'); // 密码显示图标
      const $confirmPasswordImg = $('#register_password_img2 img'); // 确认密码显示图标
      const $cancelBtn = $('#quite_register'); // 取消按钮
      const $submitBtn = $('#to_register_api'); // 提交按钮

      // 状态变量
      let isIdAvailable = false; // 用户名是否可用（默认不可用）
      let isIdChecked = false; // 是否已执行重复检查


      // 2. 用户名重复检查
      $duplicateCheckBtn.click(function () {
        const userId = $idInput.val().trim();
        if (!userId) {
          alert('아이디를 입력해주세요');
          $idInput.focus();
          return;
        }

        // 简单验证用户名格式（示例：4-20位字母/数字）
        const idRegex = /^[a-zA-Z0-9]{4,20}$/;
        if (!idRegex.test(userId)) {
          alert('아이디는 4-20位의 영문 또는 숫자로 입력해주세요');
          return;
        }

        // 禁用按钮并显示加载状态
        $duplicateCheckBtn.text('검사중...').prop('disabled', true);

        // 发送重复检查请求
        $.ajax({
          url: '/api/check-id', // 替换为实际的重复检查接口
          type: 'POST',
          dataType: 'json',
          contentType: 'application/json',
          data: JSON.stringify({ userId: userId }),
          success: function (response) {
            if (response.success) {
              alert('사용 가능한 아이디입니다');
              isIdAvailable = true;
              isIdChecked = true;
              $idInput.prop('readonly', true); // 已确认的用户名禁止修改
              $duplicateCheckBtn.text('사용가능').css('color', 'green');
            } else {
              alert(response.message || '이미 사용중인 아이디입니다');
              isIdAvailable = false;
            }
          },
          error: function () {
            alert('서버와의 연결에 실패했습니다. 다시 시도해주세요');
          },
          complete: function () {
            $duplicateCheckBtn.prop('disabled', false); // 恢复按钮状态
          }
        });
      });

      // 3. 表单验证函数
      function validateForm () {
        const account = $idInput.val().trim();
        const password = $passwordInput.val().trim();
        const confirmPassword = $confirmPasswordInput.val().trim();
        const phone = $phoneInput.val().trim();

        // 用户名检查
        if (!account) {
          alert('아이디를 입력해주세요');
          $idInput.focus();
          return false;
        }
        // if (!isIdChecked) {
        //   alert('아이디 중복체크를 해주세요');
        //   $duplicateCheckBtn.focus();
        //   return false;
        // }
        // if (!isIdAvailable) {
        //   alert('사용 가능한 아이디를 입력해주세요');
        //   $idInput.focus();
        //   return false;
        // }

        // 密码检查
        if (!password) {
          alert('비밀번호를 입력해주세요');
          $passwordInput.focus();
          return false;
        }
        // 密码强度验证（示例：至少6位，包含字母和数字）
        // const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d).{6,}$/;
        // if (!passwordRegex.test(password)) {
        //   alert('비밀번호는 6位 이상이며, 영문과 숫자를 포함해야 합니다');
        //   return false;
        // }

        // 确认密码检查
        if (password !== confirmPassword) {
          alert('비밀번호가 일치하지 않습니다');
          $confirmPasswordInput.focus();
          return false;
        }

        // 联系方式检查（示例：韩国手机号格式，可根据需求调整）
        // if (!phone) {
        //   alert('연락처를 입력해주세요');
        //   $phoneInput.focus();
        //   return false;
        // }
        // const phoneRegex = /^010\d{8}$/; // 示例：010开头的11位数字
        // if (!phoneRegex.test(phone)) {
        //   alert('올바른 연락처를 입력해주세요 (예: 01012345678)');
        //   return false;
        // }

        return {
          account: account,
          password: password,
          confirm_password: confirmPassword,
          mobile: phone
        };
      }

      // 4. 注册提交
      $submitBtn.click(function () {

        const formDataObj = validateForm();
        if (!formDataObj) return; // 验证失败则退出
        // 禁用提交按钮防止重复提交
        $submitBtn.text('가입중...').prop('disabled', true);
        const formData = new FormData();
        // 逐个添加字段（键名需与后端接口参数一致）
        formData.append('account', formDataObj.account);
        formData.append('nickname', formDataObj.account);
        formData.append('password', formDataObj.password);
        formData.append('confirm_password', formDataObj.confirm_password);
        formData.append('mobile', formDataObj.mobile);
        // 发送注册请求
        $.ajax({
          url: API_BASE_URL + '/user/register', // 替换为实际的注册接口
          type: 'POST',
          dataType: 'json',
          contentType: 'application/json',
          // data: JSON.stringify(formData),
          data: formData,
          contentType: false, // 必须设置为false（由浏览器自动生成multipart/form-data）
          processData: false, // 必须设置为false（禁止jQuery转换数据）
          success: function (response) {
            if (response.code) {
              alert(response.msg);
              $registerPopup.hide(); // 关闭注册弹窗
              // 可选：清空表单
              $('.register_popup_form')[0].reset();
              isIdAvailable = false;
              isIdChecked = false;
              $idInput.prop('readonly', false);
              $duplicateCheckBtn.text('중복체크').css('color', '');
            } else {
              alert(response.message || '회원가입에 실패했습니다');
            }
          },
          error: function (xhr) {
            // const errorMsg = xhr.responseJSON?.message || '서버 오류로 인해 가입할 수 없습니다';
            // alert(errorMsg);
          },
          complete: function () {
            // 恢复按钮状态
            $submitBtn.text('가입요청').prop('disabled', false);
          }
        });
      });

      // 5. 取消注册
      $cancelBtn.click(function () {
        if (confirm('가입을 취소하시겠습니까? 입력된 정보는 저장되지 않습니다')) {
          $registerPopup.hide();
          // 可选：清空表单
          $('.register_popup_form')[0].reset();
          // 重置状态
          isIdAvailable = false;
          isIdChecked = false;
          $idInput.prop('readonly', false);
          $duplicateCheckBtn.text('중복체크').css('color', '');
        }
      });

      // 6. 表单提交事件拦截（防止默认提交）
      $('.register_popup_form').submit(function (e) {
        e.preventDefault();
        $submitBtn.trigger('click'); // 触发自定义提交逻辑
      });
    });
  </script>
  <script>
    // 退出登录函数
    function logout () {
      // 1. 显示确认提示
      if (!confirm('确定要退出登录吗？')) {
        return;
      }

      // 2. 获取当前存储的Token
      const token = localStorage.getItem('token');
      if (!token) {
        // 无Token直接跳转登录页
        redirectToLogin();
        return;
      }

      // 3. 调用后端退出登录接口
      $.ajax({
        url: API_BASE_URL + '/user/logout', // 后端退出登录接口地址
        type: 'POST',
        headers: {
          // 携带Authorization头用于后端验证身份
          'Authorization': 'Bearer ' + token
        },
        success: function (response) {
          // 无论后端是否返回成功，均执行前端清理（确保本地状态正确）
          console.log('退出登录成功', response);
          redirectToLogin();
        },
        error: function (xhr) {
          console.error('退出登录接口请求失败', xhr);
          // 接口失败仍清理本地状态，避免残留无效登录信息
          redirectToLogin();
        }
      });
    }

    // 清理登录状态并跳转登录页
    function redirectToLogin () {
      // 1. 清除本地存储的Token
      localStorage.removeItem('token');
      localStorage.removeItem('userInfo');

      // 2. 重置全局Authorization请求头
      $.ajaxSetup({
        beforeSend: function (xhr) {
          xhr.setRequestHeader('Authorization', '');
        }
      });

      // 3. 清除页面中的用户信息
      // $('.header-username').text(''); // 清空Header中的用户名
      // $('.user-avatar').attr('src', ''); // 清空头像

      // 4. 跳转到登录页（可根据实际登录页路径修改）
      window.location.href = '/index.html';
    }

  </script>
</body>

</html>